<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部显示数字</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="counter-box">
        <span>您是本站的第</span>
        <span class="counter">
        <i class="iconfont icon-shuzi1"></i>
        <i class="iconfont icon-shuzi0"></i>
        <i class="iconfont icon-shuzi0"></i>
        <i class="iconfont icon-shuzi0"></i>
        <i class="iconfont icon-shuzi0"></i>
        <i class="iconfont icon-shuzi0"></i>
        </span>
        <span>位访问者</span>
    </div>
    <div class="ip">
        <span>内网IP:</span>
        <span id="ip1">xxxx</span>
        <span>外网IP:</span>
        <span id="ip2">xxxx</span>
    </div>
    <div class="os">
        <span>操作系统:</span>
        <span id="os">xxxx</span>
    </div>
    <div class="browser">
        <span>浏览器:</span>
        <span id="browser">xxxx</span>
    </div>

    <!-- 把封装的相应插件引入 -->
    <script src="js/ip.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="js/os.js"></script>
    <script src="js/brower.js"></script>

    <script>
        // 如何取得访问当前站点的人数
        function getData(){
            var num = localStorage.getItem('count') ? localStorage.getItem('count') - 0 : 100000;
            // 当++或--作为独立的语句,没有赋值给其他变量时,如下的三行代码效果.最终都让num + 1;
            // num++;
            // ++num;
            // num = num + 1;
            // 假设:  var a = ++num;  先加1,在使用,100000+1赋值给a  结果是100001
            // var b = num++; 先使用,再加1,num已经是100001,直接给b   结果是100001

            num = num + 1;

            localStorage.setItem('count', num);

            return num;
        }

        var count = getData();
        // console.log(count);

        function transform(count){
             var html = '';
             var str = count.toString();
             for (let i = 0; i < str.length; i++) {
                //  const num = str[i];
                 html += `<i class="iconfont icon-shuzi${str[i]}"></i>`
             }
             return html;
        }

        var html = transform(count);
        var counter = document.querySelector(".counter");
        counter.innerHTML = html;


        // 先获取IP容器, os容器, browser容器
        function setData(){
        var ip1 = document.querySelector("#ip1");
        var ip2 = document.querySelector("#ip2");
        var os = document.querySelector("#os");
        var browser = document.querySelector("#browser");

        window.ip.getIP(function (ip){
            ip1.textContent = ip || "未知";
        })
        os.textContent = window.os.getOS();
        browser.textContent = window.browser.getBrowser();
        ip2.textContent = returnCitySN.cip;
        }

        setData();

    </script>
</body>
</html>